<template>
  <view>
    <!-- <view class="page_title">知识推送</view> -->
   <u-navbar :is-back="false" title="知识推送" :is-fixed='true' :background="background" title-size="44" title-color="#000"></u-navbar>
    <!-- 知识推送模块 -->
    <view class="knowledge_item" v-for="item in articleList" :key="item.knowledgeId" @click="goDetail(item.knowledgeId)">
      <!-- 封面 -->
      <view class="item_pic">
        <image :src="item.avator" mode=""></image>
      </view>
      <!-- 右侧详情 -->
      <view class="item_detail">
        <!-- 标题 -->
        <view class="item_title">{{ item.title }}</view>
        <!-- 内容 -->
        <view class="item_content">
          {{ item.summary }}
        </view>
        <!-- 浏览量 -->
        <view class="liulan">
          <!-- 图标 -->
          <image src="https://s1.ax1x.com/2023/04/19/p9FUbz6.png" mode=""></image>
          <!-- 数量 -->
          <text>{{ item.views }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        background:{
          backgroundColor: '#F5C39F',
        },
        // 存放文章
        articleList:[],
          // 默认请求页数
        pagenum:1,
        // 每页数据条数
        pagesize:5,
        // 总数量，用来分页
        total:0,
        // 是否正在发起请求
        isLoading:false
      }
    },
    methods: {
      // 跳转到文章详情页
      goDetail(arcId){
        uni.navigateTo({
          url:`../../subpkg/knowledge/knowledge1/knowledge1?arcId=${arcId}`
        })
      },
  // 获取文章列表
  async getKnowledge(cb){
    // 开启节流阀
    this.isLoading = true
    // 发送请求
    const {data:res} = await uni.$http.get(`/knowledge/getKnowledgesByPageAndCondition?currentPage=${this.pagenum}&pageSize=${this.pagesize}`)
      // 关闭节流阀
      this.isLoading = false
      cb && cb()
      // 请求失败
      if(res.code !== '200') return uni.$showMsg()
      //  请求成功，转存数据
      this.total = res.data.count
      this.articleList = [...this.articleList,...res.data.rows]
      console.log(this.articleList);
  },
    },
    
    // 上拉加载更多
    onReachBottom(){
      // 判断是否还有下一页数据
      if(this.pagenum * this.pagesize >= this.total) return  uni.showToast({
          title:'没有更多数据了',
          icon:"none"
        })
      // 判断是否正在发起请求
      if(this.isLoading) return
      // 页码值+1
      this.pagenum++
      this.getKnowledge()
    },
    // 下拉刷新
    onPullDownRefresh(){
      // 重置数据
      this.pagenum = 1
      this.total = 0
      this.isLoading = false
      this.articleList = []
      // 发请求
      this.getKnowledge(()=>uni.stopPullDownRefresh())
    },
    
    onLoad(){
      this.getKnowledge()
    },
  }
</script>

<style lang="scss">
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  page{
    padding-bottom: 30rpx;
  }
  // 页面标题
  .page_title{
    margin-top: 88rpx;
    width: 100%;
    height: 70rpx;
    font-size: 48rpx;
    font-weight: 400;
    color: rgba(73, 69, 75, 1);
    text-align: center;
    line-height: 70rpx;
  }
  // 知识推送模块
  .knowledge_item{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 710rpx;
    height: 292rpx;
    border-radius: 32rpx;
    margin: 0 auto;
    margin-top: 44rpx;
    background: rgba(245, 195, 159, 1);
    box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.25);
    
    // 左侧图片
    .item_pic{
      width: 234rpx;
      height: 222rpx;
      border-radius: 16rpx;
      overflow: hidden;
      image{
        width: 100%;
        height: 100%;
      }
    }
    // 右侧详情
    .item_detail{
      width: 422rpx;
      // background-color: pink;
      // 标题
      .item_title{
        height: 70rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(62, 34, 22, 1);
      }
      // 内容
      .item_content{
        width: 394rpx;
        font-size: 24rpx;
        font-weight: 400;
        margin-bottom: 30rpx;
        color: rgba(140, 113, 92, 1);
        // 文字超出显示省略号
        overflow:hidden;
        text-overflow:ellipsis;
        /*弹性伸缩和字模型显示*/
        display:-webkit-box;
        /*限制在一个快元素显示的文本行数*/
        -webkit-line-clamp:3;
        /*设置或检索伸缩盒对象的子元素的排列方式*/
        -webkit-box-orient:vertical;
      }
      // 浏览量
      .liulan{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 394rpx;
        // margin-top: 30rpx;
        image{
          width: 30rpx;
          height: 32rpx;
          vertical-align: middle;
        }
        text{
          font-size: 24rpx;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }
</style>
